<template>
  <div>
    <select class="box" v-model="opt">
      <option v-for="option in arr" :value="option.name">
        {{ option.name }}
      </option>
    </select>
    <select class="box" v-model="city">
      <option v-for="option in cityArr" :value="option.name">
        {{ option.name }}
      </option>
    </select>
    <select class="box" v-model="disc">
      <option v-for="option in disArr" :value="option.name">
        {{ option.name }}
      </option>
    </select>
  </div>
</template>

<script>
var arrAll = [
  { name: "选择项目", sub: [{ name: "请选择" }], type: 1 },
  {
    name: "厨房",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "电路",
        sub: [
          { name: "请选择" },
          { name: "灯具" },
          { name: "电闸" },
          { name: "房屋停电" },
          { name: "开关" },
          { name: "排风扇" },
          { name: "插座" },
          { name: "线路" },
        ],
        type: 0,
      },
      {
        name: "电器",
        sub: [
          { name: "请选择" },
          { name: "电磁炉" },
          { name: "油烟机" },
          { name: "热水器" },
          { name: "燃气灶" },
          { name: "微波炉" },
        ],
        type: 0,
      },
      {
        name: "家具",
        sub: [{ name: "请选择" }, { name: "电热水壶" }],
        type: 0,
      },
      {
        name: "家居",
        sub: [{ name: "请选择" }, { name: "桌台" }],
        type: 0,
      },
      {
        name: "疏通",
        sub: [
          { name: "请选择" },
          { name: "地漏疏通" },
          { name: "洗池疏通" },
          { name: "管道疏通" },
        ],
        type: 0,
      },
      {
        name: "水暖",
        sub: [
          { name: "请选择" },
          { name: "闸门" },
          { name: "水龙头" },
          { name: "水管" },
          { name: "主管道" },
          { name: "暖气" },
        ],
        type: 0,
      },
      {
        name: "锁类",
        sub: [{ name: "请选择" }, { name: "机械锁" }, { name: "门锁" }],
        type: 0,
      },
      {
        name: "主体",
        sub: [{ name: "请选择" }, { name: "窗户" }],
        type: 0,
      },
    ],
    type: 1,
  },
  {
    name: "客厅",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "餐桌",
        sub: [{ name: "请选择" }, { name: "桌角" }],
        type: 0,
      },
    ],
    type: 1,
  },
  {
    name: "客厅卫生间",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "餐桌",
        sub: [{ name: "请选择" }, { name: "桌角" }],
        type: 0,
      },
    ],
    type: 1,
  },
  {
    name: "客厅阳台",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "餐桌",
        sub: [{ name: "请选择" }, { name: "桌角" }],
        type: 0,
      },
    ],
    type: 1,
  },
  {
    name: "卧室",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "餐桌",
        sub: [{ name: "请选择" }, { name: "桌角" }],
        type: 0,
      },
    ],
    type: 1,
  },
  {
    name: "卧室阳台",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "餐桌",
        sub: [{ name: "请选择" }, { name: "桌角" }],
        type: 0,
      },
    ],
    type: 1,
  },
  {
    name: "卧室卫生间",
    sub: [
      { name: "请选择", sub: [] },
      {
        name: "餐桌",
        sub: [{ name: "请选择" }, { name: "桌角" }],
        type: 0,
      },
    ],
    type: 1,
  },
];
export default {
  name: "",
  components: {},
  data() {
    return {
      arr: arrAll,
      cityArr: [],
      disArr: [],
      opt: "厨房",
      city: "电路",
      disc: "灯具",
    };
  },
  created() {},
  mounted() {},
  // 监听数据的变动
  watch:{
    // 厨房类
    opt:function(){
      this.updateCity()
      this.updateDisc()
    },
    // 电路类
    city:function(){
      this.updateDisc()
    }
  },
  methods: {
    updateCity() {
      for (var i = 0; i < this.arr.length; i++) {
        var obj = this.arr[i];
        if (obj.name == this.opt) {
          console.log(this.opt);
          this.cityArr = obj.sub;
          console.log(obj.sub);
        }
      }
      console.log(this.cityArr);
      this.city = this.cityArr[1].name;
    },
    updateDisc() {
      for (var i in this.cityArr) {
        var obj = this.cityArr[i];
        if (obj.name == this.city) {
          this.disArr = obj.sub;
        }
      }
      if (this.disArr.length > 0 && this.disArr[1].name) {
        this.disc = this.disArr[1].name;
      } else {
        this.disc = "";
      }
    },
  },
  // 页面加载之前触发 调用方法
  beforeMount() {
    this.updateCity();
    this.updateDisc();
  },
};
</script>
<style scoped lang='scss'>
.box {
  width: 150px;
  height: 30px;
  line-height: 30px;
}
</style>
